<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#aaa, #bbb{
				outline: 1px red solid;
			}
			p{
				position: fixed;;
				top: 0;
			}
		</style>
	</head>
	<body>
		<canvas id="aaa" width="500" height="300"></canvas>
		<p>44444</p>
		<canvas id="bbb" width="500" height="300"></canvas>
	</body>
</html>
<script src="../js/jquery-3.2.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript"> 
	var aaa = document.getElementById('aaa')
	var aa = aaa.getContext('2d');
	var bbb = document.getElementById('bbb')
	var bb = bbb.getContext('2d');
	
	aa.fillStyle="green";
	aa.fillRect(10,10,50,50);
	
	var a = aa.getImageData(0,0,100,100)
	console.log(a)
	
	bb.putImageData(a, 100, 100)
	
	console.log(bbb.toDataURL())
	
	
	var context = aaa.getContext('2d')
	// context.font = 'bold 35px Arial';
	context.textAlign = 'center';
	context.textBaseline = 'bottom';
	context.fillStyle = 'red';
	context.strokeText("title", 150, 100);
	context.fillStyle = '#ccc';
	context.fillText("Hello Canvas", 180, 140);     
</script>